import React, {Component, useEffect, useState} from 'react';
import ReactDOM from 'react-dom';
import G6 from '@antv/g6';


let config,graph = null;

config = {
    container: "mountNode",
    width: 0,
    height: 0,
    layout: {
        type: "force",
        linkDistance: 250,
        nodeStrength: -150, // to be decided
        preventOverlap: true,
    },
    defaultNode: {
        shape: "circle",
        size: [50],
        color: "black",
        style: {
            fill: "#0075BA",
            lineWidth: 2
        },
        labelCfg: {
            style: {
                fill: "#FFFFFF",
                fontSize: 16,
                fontFamily: "Consolas"
            }
        }
    },
    defaultEdge: {
        type: 'quadratic',
        style: {
            endArrow: true,
            stroke: "black",
            lineWidth: 2,
            fontFamily: "Consolas"
        },
        labelCfg: {
            autoRotate: true,
            refY: 10
        },
    },
    modes: {
        default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
    },
    nodeStateStyles: {
        visiting: {
            fill: "orange"
        },
        visited: {
            fill: "#909497"
        },
        select: {
            fill: "red"
        }
    },
    edgeStateStyles: {
        visiting: {
            stroke: "orange"
        },
        visited: {
            stroke: "#909497"
        },
        select: {
            stroke: "red"
        }
    }
    };

// const findElementById = (id, array) => {
//     for (let i in array) {
//         if (parseInt(array[i]._cfg.id.substring(4)) === id)
//             return i;
//     }
//     return -1;
// }

const stateCast = {
    0: "select",
    1: "visiting",
    2: "visited"
}

let data = {
    // 点集
    nodes: [{
        id: 'node1',
        label: "V1"
    }, {
        id: 'node2',
        label: "V2"
    }],
    // 边集
    edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        {
            source: 'node1',
            target: 'node2'
        }
    ]
};

let id = "mountNode";

export default function GRAPH(props)
{

    useEffect(()=>{
      if (graph && config.defaultEdge.style.endArrow !== (!props.selectDirect)) {
            graph.clear();
            config.defaultEdge.style.endArrow = !props.selectDirect;
            data.edges.map(x=>x.style = { endArrow: !props.selectDirect});
            graph.data(data);
            graph.render();
      }
  }, [props.selectDirect]);

  useEffect(() => {
    if (!graph) {
        let rightPanel = document.getElementById("left-panel");
        let graphWidth = rightPanel.offsetWidth;
        let graphHeight = rightPanel.offsetHeight;

        config.width = graphWidth;
        config.height = graphHeight;
        graph = new G6.Graph(config);


    graph.data(data);
    graph.render();
    }
  }, []);



useEffect(()=>{
    if (graph && props.nodes.length !== 0) {

        data = {
        nodes: props.nodes,
        edges: props.edeges
    };

        data.edges.map(x=>x.style = { endArrow: !props.selectDirect});
    graph.changeData(data);
    }

}, [props.changed, props.repaint]);


// 选择点
useEffect(()=>{
    if (graph && props.nodes.length !== 0 && props.nowSelectedNode !== -1 && !props.reset) {
        let nodes = graph.getNodes();
        let at = props.nowSelectedNode;
            // findElementById(props.nowSelectedNode, nodes);
        console.log("nodes", nodes);
        console.log("at", at);
        graph.clearItemStates(nodes[at]);
        graph.setItemState(nodes[at], "select", true);
}
}, [props.nowSelectedNode]);

//
useEffect(()=>{
    if (graph && props.nodes.length !== 0 && props.edgeVisitState !== -1
        && props.edgeIndex !== -1 && !props.reset) {
        let state = props.edgeVisitState;
        let at = props.edgeIndex;

        let edges = graph.getEdges();
        graph.clearItemStates(edges[at]);
        graph.setItemState(edges[at], stateCast[state], true);
    }
}, [props.edgeVisitState, props.edgeIndex]);



  return <div id={id}></div>;
}



